@page "/treemap/layout"


@using Syncfusion.Blazor.TreeMap
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the GDP nominal of top 10 countries in the year 2015. The layout and rendering direction of the TreeMap can be changed by using the <b>layout type</b> and <b>render direction</b> in the properties panel.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can change the layout of the TreeMap as desaturation color mapping has been applied to denote the weightage of the items by varying the fill color. The label text also has been formatted and placed in multiple lines. Tooltip is enabled in this example.</p>
   <p>More information about layout can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treemap/layout'>documentation section</a>.</p>
</ActionDescription>
<div class="col-lg-9 control-section sb-property-border">
    <SfTreeMap WeightValuePath="GDP" DataSource="@Economics" RangeColorValuePath="GDP" TValue="LeafData" LayoutType="@LayoutModes" RenderDirection="@RenderMode">
        <TreeMapTitleSettings Text="Top 10 countries by GDP Nominal - 2015">
            <TreeMapTitleTextStyle Size="15px"/>
        </TreeMapTitleSettings>
        <TreeMapTooltipSettings Visible="true" Format="${State}<br>Rank : ${Rank}"/>
        <TreeMapLeafItemSettings LabelPath="State" LabelFormat="${State}<br>$${GDP} Trillion<br>(${Percentage} %)">
            <TreeMapLeafColorMappings>
                <TreeMapLeafColorMapping StartRange="1550" EndRange="17946" Color="@LeafColor" MinOpacity="0.7" MaxOpacity="1"/>
            </TreeMapLeafColorMappings>
            <TreeMapLeafLabelStyle Color="#000000"/>
            <TreeMapLeafBorder Color="#000000" Width="0.5"/>
        </TreeMapLeafItemSettings>
    </SfTreeMap>
    <div class="urllink">
        Source:
        <a href=" https://www.reinisfischer.com/top-10-largest-economies-world-gdp-nominal-2015" target="_blank">www.reinisfischer.com</a>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width:100%" title="Properties">
                <tbody>
                    <tr>
                        <td>
                            Layout Type
                        </td>
                        <td>
                            <SfDropDownList Placeholder="Select smartlabel mode" DataSource="@LayoutList" @bind-Value="@LayoutValue" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="LayoutTypechange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Render Direction
                        </td>
                        <td>
                            <SfDropDownList Placeholder="Select intersect action" DataSource="@RenderingList" @bind-Value="@RenderValue" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="RenderDirectionchange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    tr {
        height:40px;
    }
    td {
        width: 50%
    }
</style>
@code {
    public LayoutMode LayoutModes = LayoutMode.Squarified;
    public string[] LeafColor = new string[] { "#9cbb59" };
    public RenderingMode RenderMode = RenderingMode.TopLeftBottomRight;
    public string LayoutValue = "Squarified";
    public string RenderValue = "TopLeftBottomRight";
    public class DropdownList {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<DropdownList> LayoutList = new List<DropdownList> {
        new DropdownList { Value="Squarified", Name="Squarified" },
        new DropdownList { Value="SliceAndDiceHorizontal", Name="SliceAndDiceHorizontal" },
        new DropdownList { Value="SliceAndDiceVertical", Name="SliceAndDiceVertical" },
         new DropdownList { Value="SliceAndDiceAuto", Name="SliceAndDiceAuto" }
    };
    public List<DropdownList> RenderingList = new List<DropdownList> {
        new DropdownList { Value="TopLeftBottomRight", Name="TopLeftBottomRight" },
        new DropdownList { Value="TopRightBottomLeft", Name="TopRightBottomLeft" },
        new DropdownList { Value="BottomLeftTopRight", Name="BottomLeftTopRight" },
        new DropdownList { Value="BottomRightTopLeft", Name="BottomRightTopLeft" }
    };
    private void LayoutTypechange(ChangeEventArgs<string,DropdownList> args) {
        LayoutValue = args.Value;
        if (args.Value == "Squarified") {
            LayoutModes = LayoutMode.Squarified;
        }
        else if (args.Value == "SliceAndDiceHorizontal") {
            LayoutModes = LayoutMode.SliceAndDiceHorizontal;
        }
        else if (args.Value == "SliceAndDiceVertical") {
            LayoutModes = LayoutMode.SliceAndDiceVertical;
        }
        else {
            LayoutModes = LayoutMode.SliceAndDiceAuto;
        }
    }
    private void RenderDirectionchange(ChangeEventArgs<string, DropdownList> args) {
        RenderValue = args.Value;
        if (args.Value == "TopLeftBottomRight") {
            RenderMode = RenderingMode.TopLeftBottomRight;
        }
        else if (args.Value == "BottomLeftTopRight") {
            RenderMode = RenderingMode.BottomLeftTopRight;
        }
        else if (args.Value == "BottomRightTopLeft") {
            RenderMode = RenderingMode.BottomRightTopLeft;
        }
        else {
            RenderMode = RenderingMode.TopRightBottomLeft;
        }
    }
    public class LeafData {
        public string State { get; set; }
        public int GDP { get; set; }
        public double Percentage { get; set; }
        public int Rank { get; set; }
    };
    public List<LeafData> Economics = new List<LeafData> {
        new LeafData { State="United States", GDP=17946, Percentage=11.08, Rank=1},
        new LeafData { State="China", GDP=10866, Percentage=28.42, Rank=2 },
        new LeafData { State="Japan", GDP=4123, Percentage=-30.78, Rank=3},
        new LeafData { State="Germany", GDP=3355, Percentage=-5.19, Rank=4},
        new LeafData { State="United Kingdom", GDP=2848, Percentage=8.28, Rank=5 },
        new LeafData { State="France", GDP=2421, Percentage=-9.69, Rank=6 },
        new LeafData { State="India", GDP=2073, Percentage=13.65, Rank=7 },
        new LeafData { State="Italy", GDP=1814, Percentage=-12.45, Rank=8 },
        new LeafData { State="Brazil", GDP=1774, Percentage=-27.88, Rank=9 },
        new LeafData { State="Canada", GDP=1550, Percentage=-15.02, Rank=10 }
    };
}
